<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
    #process {
      margin-top: 300px;
      text-align: center;
      font-size: 40px;
    }
  </style>
  <body>
    <div id="process"></div>
    <script src="./loader.js"></script>
    <script>
      const loader = new ImageLoader([
        'https://images.pexels.com/photos/2253916/pexels-photo-2253916.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
        'https://images.pexels.com/photos/2234625/pexels-photo-2234625.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
        'https://images.pexels.com/photos/2225380/pexels-photo-2225380.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
        'https://images.pexels.com/photos/2258536/pexels-photo-2258536.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
        'https://images.pexels.com/photos/2253805/pexels-photo-2253805.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
        'https://images.pexels.com/photos/2253821/pexels-photo-2253821.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
      ])

      loader.addSource(
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3346793551,1477531797&fm=27&gp=0.jpg'
      )

      loader.addSource(
        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2058871379,2864063282&fm=27&gp=0.jpg'
      )

      loader.addSource(
        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1123099542,3778738391&fm=27&gp=0.jpg'
      )

      loader.addProcessListener(p => {
        document.getElementById('process').innerHTML = p + '%'
      })
      loader.addCompletionListener(() => console.log('oj8k'))

      loader.start()
    </script>
  </body>
</html>
